<link rel="stylesheet" href="assets/css/bootstrap-treeview.min.css" />
<style>
	#contact-tree {
		background-color: white;
		overflow: auto;
		min-height:400px;
		max-height:480px;
	}

	.avatar-md,
	.avatar-lg {
		width: 43px;
		height: 43px;
		border: 5px solid #AAAAAA;
		cursor: pointer;
	}

	.avatar-lg {
		width: 160px;
		height:160px;
	}

	#contact-name{
		font-size:30px;
	}

	.fa-mars{
		color:dodgerblue;
	}
	.fa-venus{
		color:pink;
	}
	.contact-basic{
		border-bottom:1px solid #999999;
		padding:20px;
	}
	.contact-name-wrapper{
		margin-bottom: 34px;
	}
	.contact-basic-props{
		font-size: 16px;
		color:#888888;
		height:30px;
	}
</style>
<div id="page-inner">
	<div class="row">
		<div class="col-xs-12">
			<div class="panel panel-default">
				<div class="panel-heading"></div>
				<div class="panel-body" style="max-height: 800px">
					<div class="row">
						<div class="col-xs-5 col-sm-4 col-md-3" id="contact-tree">
						</div>
						<div class="col-xs-7 col-sm-8 col-md-9" id="contact-detail">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="assets/js/bootstrap-treeview.min.js"></script>
<script src="assets/js/tasklib.js"></script>
<script>
	$(function () {
		var contacts;
		var contactTree;
		var op = createOperation('getContacts');
		getJson(op, function (data) {
			if (data.status == 0) {
				contacts = data.entity;
				contactTree = new userSelector('contact-tree', contacts);
				contactTree.setUserTree('contact-tree');
				contactTree.setData(contacts);
				contactTree.onNodeSelected = function (event, node) {
					loadUserDetail(node);
				}
				contactTree.show();
			}
			else warn(data.message);
		}, function (status, err) {
			warn("数据请求失败：\nStatus:" + status + "\nerror:" + err);
		});

		function loadUserDetail(node) {
			$("#contact-detail").load("parts/parts.contactDetail.html", function () {
				//加载头像
				getJson(createOperation('getUserById', { userId: node.id }), function (data) {
					$(".avatar-lg").attr('src', data.entity.user.avatar);
					$("#contact-name").html(data.entity.user.name);
					if (data.entity.user.sex=="男")
						$("#contact-sex").addClass("fa-mars");
					if(data.entity.user.sex=="女")
						$("#contact-sex").addClass("fa-venus");
					$("#contact-team").html(data.entity.team.teamName);
					$("#contact-email").html(data.entity.user.email);
					$("#contact-phone").html(data.entity.user.phone);
				}, function (status, err) {
					warn(status + "\n" + err);
				});
			});
		}
	});

</script>